<template>
  <!--   卡片视图区域 -->
  <el-card class="box-card" style="position: relative;">
<!--    <div class="button-group">-->
<!--      &lt;!&ndash; 搜索与添加区域 &ndash;&gt;-->
<!--      <el-input style="width: 200px" placeholder="产品名" v-model="formInput.name"></el-input>-->
<!--      &nbsp;&nbsp;-->
<!--      <el-input style="width: 200px" placeholder="类型" v-model="formInput.type"></el-input>-->
<!--      &nbsp;&nbsp;-->
<!--      <el-input style="width: 200px" placeholder="价格" v-model="formInput.price"></el-input>-->
<!--      &nbsp;&nbsp;-->
<!--      <el-button type="primary" @click="gotoSearch">查询</el-button>-->
<!--      &nbsp;&nbsp;-->
<!--      <el-button type="success" @click="exportData">导出数据</el-button>-->
<!--    </div>-->
    <el-table style="width: 100%;"
              :data="allData"
              :empty-text="' '"
              height="500px"
    >
      <el-table-column  width="55" />
      <el-table-column label="产品名" :resizable="true" prop="name" ></el-table-column>
      <el-table-column label="类型" :resizable="true" prop="type"></el-table-column>
      <el-table-column label="图片" :resizable="true">
        <template v-slot:default="{ row }">
          <img :src="row.image" alt="图片" style="width: 100px; height: auto;  max-height: 80px; " >
        </template>
      </el-table-column>
      <el-table-column label="价格(元)/斤" :resizable="true" prop="price"></el-table-column>
      <el-table-column label="描述" :resizable="true" prop="description" calss="price"></el-table-column>
      <el-table-column label="数量" :resizable="true" prop="number" calss="price">
        <template v-slot:default="{ row }">
          <div>
            <el-icon @click="AddNumber(row)" style="cursor: pointer; margin-right: 5px" color="red" size="15"><CirclePlusFilled /></el-icon>
            <span style="font-size: 18px">{{ row.number }}</span>
            <el-icon @click="ReduceNumber(row)" style="cursor: pointer; margin-left: 5px" color="blue" size="15"><RemoveFilled /></el-icon>
          </div>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <div>
          <el-empty description="这里空空如也"/>
        </div>
      </template>
    </el-table>
    <div>
      <div style="color: cornflowerblue">点击下方购物车结算</div>
    <el-icon style="cursor: pointer; margin-left: 20px" color="red" size="60px"   title="点击去支付" @click="GoToPay">
      <ShoppingCartFull />
    </el-icon>
    </div>
    <!--    点击编辑打开的对话框-->

  </el-card>
  <el-dialog v-model="outerVisible" title="结算界面" style="width: 600px;height: 320px;text-align: center;">
<!--    <template #default>-->
<!--      <el-dialog-->
<!--          v-model="innerVisible"-->
<!--          width="30%"-->
<!--          title="闹着玩的，别支付"-->
<!--          append-to-body-->
<!--      >-->
<!--        <img src="https://2023-08-02first-use-oss.oss-cn-chengdu.aliyuncs.com/0e1501bb36dd4b9d8f83a4a617548a9a.jpg" alt="Image" style="max-width: 100%; max-height: 100%; object-fit: contain;" />-->
<!--        <div >-->
<!--&lt;!&ndash;          <el-button @click="outerVisible = false">取消</el-button>&ndash;&gt;-->
<!--          <el-button type="primary" @click=AlreadyPay>-->
<!--            已支付-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->
<!--    </template>-->
    <template #footer class="el-dialog__body">
      <el-form :model="totalData" style="margin-top: 10px">
      <el-form-item label="商品总数" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="name" style="margin-bottom: 30px">
        <el-input v-model="totalData.totalNumber" autocomplete="off" :readonly="true"/>
      </el-form-item>
      <el-form-item label="商品总价" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="name">
        <el-input v-model="totalData.totalPrice" autocomplete="off" :readonly="true"/>
      </el-form-item>
    </el-form>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" @click="readyPay">
          立即支付
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  卡片新增用户的地方-->

</template>

<script setup lang="ts">
import {onMounted, ref,computed} from 'vue';
import userApi from "../../apis/user.js"
import { ElMessage, ElMessageBox } from 'element-plus'
onMounted(()=>{
  getAllProductData();
})
const outerVisible = ref(false)
const innerVisible = ref(false)
const allData =ref([]);
//定义或取所有的数据并且展示和分页查询
const getAllProductData = () => {
  userApi.GetSelfProduct().then(res=>{
    console.log(res);
    console.log(res.data);
    allData.value=res.data;
  })
};
//绑定选择的标号
const AddNumber = (row) => {
  row.number+=1
  userApi.ChangeProductNumber(row).then(res=>{
    console.log(res);
    console.log(res.status);
    ElMessage.success({
      message: '新增数量成功',
      duration: 1500, // 设置显示时间为 1.5 秒
    });
  })
}
//控制编辑的对话框是否打开
const ReduceNumber = (row) => {
  console.log(row)
  if(row.number==1){
    ElMessageBox.confirm(
        '确认要移出该商品吗?',
        'Warning',
        {
          confirmButtonText: '确认',
          cancelButtonText: '再想想',
          type: 'warning',
        }
    )
        .then(() => {
          userApi.deleteProductDetailById(row.id).then(res=>{
            console.log(res);
            ElMessage.warning({
              message: '移出商品成功',
              duration: 1500, // 设置显示时间为 1.5 秒
            });
            getAllProductData();
          })
        })
        .catch(() => {
          // ElMessage({
          //   type: 'info',
          //   message: 'Delete canceled',
          // })
        })
  }
  else if(row.number<=0){
    return;
  }
  else {
    console.log("减少前的数量")
    console.log(row.number);
    row.number--;
    console.log("减少后的数量")
    console.log(row.number);
    userApi.ChangeProductNumber(row).then(res=>{
      ElMessage.success({
        message: '减少数量成功',
        duration: 1500, // 设置显示时间为 1.5 秒
      });
    })
  }
}
const GoToPay = () => {
  getAllProductData();
  const totalNumber = computed(() => {
    let count = 0;
    for (const item of allData.value) {
      console.log(item);
      count += Number(item.number);
    }
    return count;
  });
  console.log(totalNumber);
  console.log(typeof(totalNumber));
  const totalPrice = computed(() => {
    let allPrice = 0;
    for (const item of allData.value) {
      allPrice += Number(item.number) * Number(item.price)
    }
    return allPrice;
  });
  totalData.value.totalPrice=totalPrice.value
  const innerVisible = ref(false)
  console.log(typeof totalNumber.value)
  totalData.value.totalNumber=totalNumber.value;
  console.log(typeof(totalData.value.totalNumber))
  outerVisible.value=true;
  //打开视图对话框
  console.log("我要去支付了")
}
const totalData = ref({
  totalPrice:0,
  totalNumber:0,
  subject:'商品',
  traceNo:''
})
const readyPay = () => {
   var currentDate = new Date();
   var currentTime = currentDate.toLocaleString();
   var time;
   console.log(currentTime);
   time = currentTime.toString();
   totalData.value.traceNo = time+totalData.value.totalNumber+totalData.value.totalPrice;
   console.log(totalData.value.traceNo);
   outerVisible.value=false;
   innerVisible.value=true;
   var extractedDigits = totalData.value.traceNo.replace(/\D/g, "");
   window.open("http://8.137.113.138:88/alipay/pay?subject=" + totalData.value.subject +"&traceNo="+extractedDigits + "&totalPrice=" + totalData.value.totalPrice +  "&totalNumber=" + totalData.value.totalNumber);
   ElMessage.success({
     message:"付款成功",
     duration:1500
   })
   userApi.DeleteProductBYSelfId().then(res=>{
     console.log(res);
   })
}
// const AlreadyPay =()=>{
//   innerVisible.value=false;
//   outerVisible.value=false;
// }
const formLabelWidth = ref('70px')
const inputWidth = ref('200px');
</script>
<style scoped>
  .dialog-footer{
    margin-left: 300px;
    margin-top: 50px;
  }
</style>

